<template>
    <div class="mainDiv">
      <mt-cell class="border-bot" title="相应的范围有："></mt-cell>
      <div class="">
        <mt-cell class="border-bot h60">
          <div slot="title">
            <!-- <span>学校<b>{{majorFit.totalSchool}}</b>所</span>
            <mt-progress :value="schoolRate" :bar-height="5">
              <div slot="end">{{schoolRate.toFixed(2)}}%</div>
            </mt-progress> -->
            <div class="col-12">
             <div class="col-tit">学校</div>
             <div  class="col-txt">占比{{schoolRate.toFixed(2)}}%</div>
            </div>
            <div class="col-12 col-num">
              {{majorFit.totalSchool}}所
            </div>
          </div>
        </mt-cell>
        <mt-cell class="border-bot h60">
          <div slot="title">
            <!-- <span>专业<b>{{majorFit.totalMajor}}</b>个</span>
            <mt-progress :value="majorRate" :bar-height="5">
              <div slot="end">{{majorRate.toFixed(2)}}%</div>
            </mt-progress> -->
            <div class="col-12">
             <div class="col-tit">专业</div>
             <div  class="col-txt">占比{{majorRate.toFixed(2)}}%</div>
            </div>
            <div class="col-12 col-num">
              {{majorFit.totalMajor}}个
            </div>
          </div>
        </mt-cell>
        <mt-cell class="h60">
          <div slot="title">
             <div class="col-12">
             <div class="col-tit">招生计划</div>
             <div  class="col-txt">占比{{peopleRate.toFixed(2)}}%</div>
            </div>
            <div class="col-12 col-num">
              {{majorFit.totalPeople}}个
            </div>
          </div>
        </mt-cell>
      </div>
      <div class="line"></div>
      <mt-cell class="h40" title="请选择意向省份："></mt-cell>
      <div class="pad5" style="padding-top:0">
        <div class="paceRadio">
          <mt-checklist class="myRadio clear" v-model="allAreas" :options="allArea"></mt-checklist>
        </div>
        <div class="paceRadio">
          <mt-checklist class="myRadio"  v-model="provinces" :options="options"></mt-checklist>
        </div>       
      </div>
      <div class="padlr10">
        <mt-button size="large" type="primary" @click="chooseProvince">下一步</mt-button>
      </div>
    </div>
</template>

<script>
    export default {
        name: "province",
        data() {
        return {
          provinces:[],
          allAreas:["全国"],
          allArea:["全国"],
          options:["浙江","上海","江苏","安徽","福建","北京","广东","重庆","甘肃","广西","贵州","海南","河北","河南","湖北","湖南","吉林","江西","辽宁","宁夏","青海","山东","山西","陕西","四川","天津","西藏","云南","黑龙江","内蒙古","台湾","香港","澳门","新疆"]
          ,total:{totalPeople:1,totalMajor:1,totalSchool:1}
          ,majorFit:{totalPeople:1,totalMajor:1,totalSchool:1}
         }
       },
       watch:{allAreas:{
          handler(newVal,oldVal){
            if(newVal.length){
              this.provinces = [];
            }
          },
          deep:true},
         provinces:{
           handler(newVal,oldVal){
             if(newVal.length){
               this.allAreas = [];
             }
           },
           deep:true},
        },
       methods:{
         checkallArea:function(){
           if(this.allAreas.length){
             this.provinces = [];
           }
         },
         checkProvince:function(){
           if(this.provinces.length){
             this.allAreas = [];
           }
         },
        chooseProvince:function(){
          let chosen = this.allAreas.length?this.allAreas:this.provinces;
          this.$router.push({path:"/student/risk", query:{year:this.$root.year,batch:this.$route.query.batch,provinces:chosen}});
        }
       },
       computed:{
          schoolRate:function(){return this.majorFit.totalSchool*100/this.total.totalSchool},
          majorRate:function(){return this.majorFit.totalMajor*100/this.total.totalMajor},
          peopleRate:function(){return this.majorFit.totalPeople*100/this.total.totalPeople},
       },
      created(){
        checkLogin(this);
       },
      mounted(){
         console.log(this.$route.query.batch);
        let vm = this;
        vm.$http.get("/auth/overview",{params:{year:vm.$root.year,batch:this.$route.query.batch}}).then(resp=>{
          vm.total = resp.data.total;
          vm.majorFit = resp.data.majorFit;
        })
      }
    }
</script>

<style >
.paceRadio .myRadio{
  margin-top: 0!important;
}
  .myRadio .mint-cell{
    float: left;
  }
   .mint-checklist-title{
    margin: 0;
  }
  .mint-cell-wrapper{
  background-image: none!important;
 }
  .h40{
    min-height: 40px;
  }
</style>
